<template>
    <div class="type-task">
        <div class="task-content">
            <span class="task-msg">文案</span>
            <span class="go-task">去游戏</span>
        </div>
    </div>
</template>

<script>
export default {
    // 任务 8000
    name: 'model8000',
    props: ['data'],
    data () {
        return {
            detail: {
            }
        }
    },
    created () {
        if (this.data && this.data.elements && this.data.elements.length) {
            this.detail = this.data
        }
    },
    watch: {
        data: {
            handler: function (val) {
                if (val && val.elements && val.elements.length) {
                    this.detail = val
                }
            },
            deep: true
        }
    }
}
</script>

<style lang="scss">
    .type-task {
        padding: 18px 16px;
        border-bottom: 1px solid rgba(228,228,228,1);
        .task-content {
            height: 64px;
            background-color: #ddd;
            border-radius: 8px;
            padding: 0 16px 0 64px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .task-msg {
                font-size:16px;
                font-family:SourceHanSansCN-Medium,SourceHanSansCN;
                font-weight:500;
                color:rgba(255,255,255,1);
            }
            .go-task {
                width:72px;
                height:32px;
                background:rgba(0,121,255,0.5);
                border-radius:6px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size:14px;
                font-family:SourceHanSansCN-Medium,SourceHanSansCN;
                font-weight:500;
                color:rgba(255,255,255,1);
                cursor: pointer;
            }
        }
    }
</style>
